//import liraries
import React, { PureComponent,PropTypes} from 'react'
import { Image,Animated,Easing,DeviceEventEmitter } from 'react-native'

// create a component
export default class TabBarItem extends PureComponent {

    static  propTypes = {
        focused:PropTypes.any,
        selectedImage:PropTypes.any,
        normalImage:PropTypes.any,
        tintColor:PropTypes.any,
        index:PropTypes.any
    }

    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
        this.spinValue = new Animated.Value(0);
      }

    componentDidMount() {

        this.subscription = DeviceEventEmitter.addListener('ClickCartComplete',this.clickCartComplete.bind(this));
    }
    clickCartComplete(){



        this.spin()

    }

    componentWillUnmount(){
        this.subscription.remove();
    };

    spin () {
        this.spinValue.setValue(0)
        Animated.timing(
            this.spinValue,
            {
                toValue: 1,
                duration: 1000,
                easing: Easing.linear
            }
        ).start()
    }

    render() {
        const x = this.spinValue.interpolate({
            inputRange: [0,0.1,0.5,1],
            outputRange: [1,0.9,1.3,1]
        })
        let selectedImage = this.props.selectedImage ? this.props.selectedImage : this.props.normalImage
        return (
            <Animated.Image
                source={this.props.focused
                    ? selectedImage
                    : this.props.normalImage}
                style={{ tintColor: this.props.tintColor, width: 20, height: 20 ,transform:[{scale:this.props.index ==3?x:1}]}}
            />
        );
    }
}

//make this component available to the app
